<template>
    <div class="flex-container">
        <div class="flex-item">
            <div class="arrow-left"></div>
        </div>
        <div class="flex-item">
            <div class="arrow-left"></div>
        </div>
        <div class="flex-item">
            <div class="arrow-left"></div>
        </div>
        <div class="flex-item">
            <div class="arrow-left"></div>
        </div>
        <div class="flex-item">
            <div class="arrow-left"></div>
        </div>
        <div class="flex-item">
            <div class="arrow-left"></div>
        </div>
        <div class="flex-item">
            <div class="arrow-left"></div>
        </div>
        <div class="flex-item">
            <div class="arrow-left"></div>
        </div>
        <div class="flex-item">
            <div class="arrow-left"></div>
        </div>
        <div class="flex-item">
            <div class="arrow-left"></div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style scoped>
    .flex-container {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
    }
    .flex-item {
        width: 25%;
        background: #dddddd;
        border: #eeeeee .01rem solid;
    }
    .arrow-left::before {
        content: '';
        border-top: .01rem solid #f00000;
        border-right: .01rem solid #f00000;
        width: 0.12rem;
        height: 0.12rem;
        display: inline-block;
        transform: rotate(45deg);
    }
</style>
